<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>注册</title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
    <div>
        <span id="basic-addon1">邮箱</span>
        <input id="email" name="email" type="text" aria-describedby="basic-addon1" />
    </div>
    <br/>
    <div>
        <span id="basic-addon2">密码</span>
        <input id="password" name="password" type="password" aria-describedby="basic-addon2" />
    </div>
    <div>
        <span id="basic-addon3">确认密码</span>
        <input id="confirmPassword" name="confirmPassword" type="password" aria-describedby="basic-addon3" />
    </div>
    <div>
        <span id="basic-addon4">验证码</span>
        <input id="code" name="password" type="text" aria-describedby="basic-addon4" />
        <button id="createCode" name="createCode" type="button" style="width:160px;">获取验证码</button>
    </div>
    <br/>
    <button id="register" name="register" type="button" style="width:170px;">注 册</button>

</div>
<script>
    $("#register").click(function() {
        var email=document.getElementById("email").value;
        var password=document.getElementById("password").value;
        var confirmPassword=document.getElementById("confirmPassword").value;
        var code=document.getElementById("code").value;

        if(password != confirmPassword){
            alert("两次输入的密码不一致，请重新输入！")
            return;
        }
        $.ajax({
            url: "http://www.test.com/api/user/register/" + email + "/" + password + "/" + code,
            type: "GET",
            success: function(data) {
                if(data == true){
                    window.location.href='http://www.test.com/static/welcome.html?email=' + email;
                } else {
                    alert("注册失败！")
                }
            }
        });
    });

    $("#createCode").click(function() {
        var email=document.getElementById("email").value;
        time(this);
        $.ajax({
            url: "http://www.test.com/api/code/create/" + email,
            type: "GET",
            success: function(data) {
                if(data == true){
                    alert("获取验证码成功，请查看邮件！")
                } else {
                    alert("获取验证码失败！")
                }
            }
        });
    });

    var wait = 60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.innerHTML = "获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.innerHTML = wait + "秒后可以重新发送";
            wait--;
            setTimeout(function() {
                time(o)
            }, 1000)
        }
    }
</script>
</body>
</html>
